<template>
  <div>
    <!-- <el-radio-group v-model="labelPosition" size="small">
      <el-radio-button label="left">左对齐</el-radio-button>
      <el-radio-button label="right">右对齐</el-radio-button>
      <el-radio-button label="top">顶部对齐</el-radio-button>
    </el-radio-group> -->
    <div></div>
    <el-form
      style="margin: 20px"
      label-width="80px"
      :model="form"
      ref="urForm"
      :rules="infoRuels"
    >
      <el-form-item label="登录名称">
        <el-input
          v-model="form.username"
          style="width: 350px"
          disabled
        ></el-input>
      </el-form-item>
      <el-form-item label="用户昵称" prop="nickname">
        <el-input v-model="form.nickname" style="width: 350px"></el-input>
      </el-form-item>
      <el-form-item label="用户邮箱" prop="email">
        <el-input v-model="form.email" style="width: 350px"></el-input>
      </el-form-item>
      <!-- 按钮 -->
      <el-form-item>
        <el-button type="primary" @click="submitForm">提交修改</el-button>
        <el-button @click="resetForm">重置</el-button>
      </el-form-item>
      <!-- 按钮结束 -->
    </el-form>
  </div>
</template>
<script>
// 获取用户数据,把数据给表单
import { mapState } from 'vuex'
import { BtnForm } from '../../api/art'
export default {
  data () {
    return {
      // labelPosition: 'right',
      form: {
        id: 1,
        username: '',
        nickname: '',
        email: ''
      },
      infoRuels: {
        nickname: [
          {
            required: true,
            message: '昵称不能为空',
            trigger: ['blur', 'blur']
          },
          {
            pattern: /^\S{1,10}$/,
            message: '昵称是1-10个非空字符',
            trigger: ['blur', 'blur']
          }
        ],
        email: [
          {
            required: true,
            message: '邮箱不能为空',
            trigger: ['blur', 'change']
          },
          {
            pattern: /^([a-z0-9_.-]+)@([\da-z.-]+)\.([a-z.]{2,6})$/,
            message: '邮箱格式不正确',
            trigger: ['blur', 'change']
          }
        ]
      }
    }
  },
  computed: {
    ...mapState('user', ['userinfo'])
  },
  mounted () {
    setTimeout(() => {
      this.form = this.userinfo
    }, 1000)
  },
  methods: {
    submitForm () {
      this.$refs.urForm.validate(async (valid) => {
        if (valid) {
          // alert('提交修改正确')
          console.log(valid, 9999)
          const res = await BtnForm(this.form)
          // console.log(res)
          this.$message.success(res.data.message)
        } else {
          console.log('error submit!!')
          return false
        }
      })
    },
    resetForm () {
      // 获取dom元素,重置表单
      this.form = this.userinfo
      this.$refs.urForm.resetFields()
    }
  }
}
</script>
